import React,{ useEffect ,useState, useRef }  from 'react';
import {NavBar,Icon} from 'antd-mobile';
import {Tag ,Divider} from 'antd'
import './videodetail.css'
import {typeid2name} from './util'
import './player'
import Player from './player';

//这里path只取决于路由state参数，所以直接赋值，以防后边path变化而video的src不更新
const Videodetail = (props)=>{
    const [videoname,setvideoname] = useState("")
    const [path,setpath] = useState(props.location.state.video_info.path)
    const [description,setdescription] = useState("")
    const [typename,settypename] = useState()
    const [keywords,setkeywords] = useState([])
    const [stime,setstime] = useState()
    const [utime,setutime] = useState()
    const [repeople,setrepeople] = useState([])

    
    useEffect(()=>{
        
        const data = props.location.state.video_info
        
        setpath(data.path)
        setvideoname(data.videoname)
        setdescription(data.description)
        settypename(typeid2name(data.typeId))
        setkeywords(data.keywords.trim().split(" "))
        setstime(data.shootingTime)
        setutime(data.uploadTime)
        setrepeople(data.relevantPeople.trim().split(" "))
      
        console.log(data.path);
    },[])

    const goback = ()=>{
        props.history.goBack()
    }

    const videoJsOptions = {
        
        autoplay: false,
        controls: true,
        preload: 'atuo',
        height:200,
        sources: [
          {
            src: path,
            type: 'video/mp4',
          },
        ],
      }

    return (
        
        <div>
            <NavBar
            mode="dark"
            icon={<Icon type="left" />}
            onLeftClick={goback}
            rightContent={[
              ]}
            >
                <span>{videoname}</span>
            </NavBar>
            
    <div className="video_detail">
   
        <div className="video">
            {/* <video  id="mt"  controls preload="auto" height="200" >      
            <source src={path} type="video/mp4"/>
            </video> */}
            <Player   {...videoJsOptions}></Player>
        </div>
        
        <div className="video_des">
            <div className="keys">
                {keywords.map(item=>{
                    return (<Tag color="blue" key={item}>{item}</Tag>)
                })}
            </div>
            <div className="des">
                <Divider orientation="right">视频信息</Divider>
                <div className= "video_info">
                    <div>
                        视频类型: {typename}
                    </div>
                
                    <div>
                        拍摄日期：{stime}
                    </div>

                    <div>
                        上传日期：{utime}
                    </div>

                    <div>
                        相关人物:{
                            repeople.map(item=>{
                                return (<span key={item}> {item} </span>)
                            })
                        }
                    </div>
                </div>
                   
                <Divider orientation="right">视频简介</Divider>
                <div className="description">
                    {description}
                </div>
            </div>
            
        </div>
        
      
    </div> 
    </div> 
    );
}
 
export default Videodetail;